<template>
	<view>
	
		<view class="city-content">
			<view class="content-box">
				<view class="content-left" :style="{height:height+'px'}">
					<view class="city-name" :class="{'acitvieColor':index==selectDefalutNum}"
						v-for="(item,index) in provices" :key="index">
						<text @click="changeCity(index)"
							:class="{'acitiveTxt':item.checked==true}">{{item.areaName}}</text>
					</view>
				</view>
				<view class="content-right">

					<u-checkbox-group placement="col">
						<u-checkbox @change="selectall" label="全选" name="全选" :checked="isAllcheck" :acitvieColor="isAllcheck?'#0B67F1':''" :labelColor="isAllcheck?'#0B67F1':''"></u-checkbox>
					</u-checkbox-group>
					<u-checkbox-group placement="col" v-model="checkboxValue[selectDefalutNum]" @change="checkboxGroupChange">
						<u-checkbox
									v-for="(item, index) in provices[selectDefalutNum].children"
									:key="item.id"
									:label="item.areaName"
									:name="item.id"
									@change="checkboxChange"
						>
						</u-checkbox>
					</u-checkbox-group>


				</view>
			</view>
		</view>
	</view>

</template>

<script>
 

	let provices = require('./provice.json')
	const app = getApp();
	export default {
		components: {
			 
		
		},
		data() {
			return {
				checkboxValue: [],
				isAllcheck: false,
				cityList: [],
				selectVal: [],
				height: 0,
				provices: provices,
				selectDefalutNum: 0, //默认选择第一个
				navBarHeight: 44,
				menuTop: app.globalData.menuTop
			}
		},
		watch: {},
		methods: {
			selectall(e) {
				if (e) {
					//表示全选
					this.isAllcheck = true;
					this.provices[this.selectDefalutNum].children.map((item) => {
						let checkedArray = this.checkboxValue[this.selectDefalutNum]
						if (checkedArray.indexOf(item.id) === -1) {
							checkedArray.push(item.id)
							this.$set(this.checkboxValue, this.selectDefalutNum, checkedArray)
						}
					})
				} else {
					this.isAllcheck = false;
					this.provices[this.selectDefalutNum].checked = false
					//表示全不选
					this.$set(this.checkboxValue, this.selectDefalutNum, [])
				}
				// this.$set(this.checkboxValue,this.selectDefalutNum,this.checkboxValue)
				console.log(this.checkboxValue[this.selectDefalutNum])
				this.getAllselectVal()
			},
			changeCity(num) {
				this.selectDefalutNum = num
				this.allCheckedStatus()
			},
			checkboxChange(e) {
				console.log(e)
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e)
				this.$set(this.checkboxValue, this.selectDefalutNum, e)
				this.getAllselectVal()
				this.allCheckedStatus()
			},
			//获取所有选中的值
			getAllselectVal() {
				let selectVal = []
				let selectCity = []
				this.checkboxValue.forEach((item) => {
					selectVal = selectVal.concat(item)
				})
				this.provices.forEach((item) => {
					item.children.forEach((item) => {
						if (selectVal.indexOf(item.id) !== -1) {
							selectCity.push(item)
						}
					})
				})
				selectCity.forEach((item) => {
					item.children = null
				})
				uni.setStorageSync('SELECTED_CITY_IDS', JSON.stringify(selectVal))
				uni.setStorageSync('selectCity', JSON.stringify(selectCity))
			},
			allCheckedStatus() {
				this.isAllcheck = true
				this.provices[this.selectDefalutNum].children.some((item) => {
					if (this.checkboxValue[this.selectDefalutNum].indexOf(item.id) === -1) {
						this.isAllcheck = false
						return true
					}
				})
			}
		},

		onLoad() {
			var that = this;
			// 获取系统信息
			wx.getSystemInfo({
				success: function(res) {
					// 获取可使用窗口宽度
					let clientHeight = res.windowHeight;
					// 设置高度
					that.height = clientHeight - (that.navBarHeight + 8);
				}
			})
			this.provices.forEach((item, index) => {
				this.checkboxValue.push([])
			})
		},
		created() {

		},
		mounted() {

		}
	}
</script>

<style scoped>
	.city-content {
		width: 100%;
		background: white;
		overflow: hidden;


	}

	.content-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;


	}

	.content-left {
		width: 280rpx;
		background: #F2F2F2;
		overflow-y: scroll;
	}

	.content-right {
		width: 470rpx;
		height: auto;
		overflow-y: scroll;
		padding-left: 20rpx;
	}

	.city-name {
		width: 100%;
		text-align: center;
		height: 96rpx;
		line-height: 96rpx;
		color: #595959;
		font-size: 28rpx;
	}

	.city-name text {
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.acitvieColor {
		background: white;
		color: #0B67F1;
	}

	.acitvieColor text {
		color: #0B67F1;
	}

	.acitiveTxt {
		color: #0B67F1;
	}

	.city-name-select text {
		width: auto;
	}

	.city-name-select {
		display: flex;
		justify-content: space-around;
	}

	/deep/ .u-checkbox {
		display: inline-block !important;
		width: 100% !important;
		height: 96rpx;
		line-height: 96rpx;
		justify-content: space-evenly;

	}

	/deep/.u-checkbox__label {
		float: left;
		height: 96rpx;
		line-height: 96rpx;
		margin-left: 40rpx !important;
	}

	/deep/.u-checkbox__icon-wrap {
		float: right;
		height: 96rpx;
		line-height: 96rpx;
		margin-right: 30rpx;
		margin-top: 31rpx;
	}
</style>